import 'package:flutter/material.dart';
import '../../utils/layout/layout_responsive.dart';
import '../../utils/G.dart';

class HomeProduct extends StatefulWidget {
  const HomeProduct({Key? key}) : super(key: key);

  @override
  _HomeProductState createState() => _HomeProductState();
}

class _HomeProductState extends State<HomeProduct> {
  List productList = [];

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: G.api.product.list(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            var res = snapshot.data as Map;
            if (res['status'] == 200) {
              productList = res['data'];

              return Padding(
                padding: const EdgeInsets.fromLTRB(5, 0, 5, 0),
                child: Wrap(
                  direction: Axis.horizontal,
                  alignment: WrapAlignment.spaceBetween,
                  children: _renderProductList(),
                ),
              );
            } else {
              // 报错
              G.error('接口请求失败01');
            }
          } else if (snapshot.hasError) {
            return Center(
              child: Text("${snapshot.error}"),
            );
          }

          return G.loader();
        });
  }

  List<Widget> _renderProductList() {
    return productList.map((item) {
      return InkWell(
          onTap: () {
            // 点击进入商品详情页面
            Map<String, dynamic> p = {'id': item['id']};
            G.router.navigateTo(
                context, '/product_detail' + G.parseQuery(params: p));
          },
          child: Container(
              width: _getWidth(),
              margin: const EdgeInsets.fromLTRB(5, 15, 5, 0),
              decoration: BoxDecoration(
                  borderRadius: const BorderRadius.all(Radius.circular(10.0)),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.grey[300]!,
                        offset: const Offset(4, 4),
                        blurRadius: 8.0)
                  ]),
              child: _renderProductItem(item)));
    }).toList();
  }

  double _getWidth() {
    if (LayoutResponsive.isXS(context) || LayoutResponsive.isSM(context)) {
      return (G.width - 30) / 2;
    } else {
      return 220;
    }
  }

  Widget _renderProductItem(Map item) {
    return ClipRRect(
        borderRadius: const BorderRadius.all(Radius.circular(10.0)),
        child: Container(
            color: Colors.white,
            child: Column(
              children: [
                G.imageWidget(item['image']),
                Container(
                    alignment: Alignment.topLeft,
                    padding: const EdgeInsets.all(10.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          item['store_name'],
                          style: const TextStyle(fontSize: 14),
                          overflow: TextOverflow.ellipsis,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              "￥" + item['price'].toString(),
                              style: Theme.of(context).textTheme.headline6,
                              // TextStyle(
                              //   fontSize: 16,
                              //   color: Theme.of(context).primaryColor
                              // ),
                              overflow: TextOverflow.ellipsis,
                            ),
                            Text(
                              "已售：" + item['sales'].toString(),
                              style: const TextStyle(
                                  fontSize: 12, color: Colors.grey),
                              overflow: TextOverflow.ellipsis,
                            ),
                          ],
                        )
                      ],
                    ))
              ],
            )));
  }
}
